<template>
    <div>
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 10px;" v-permission="'/blogSort/getList'">
            <el-input clearable class="filter-item" style="width: 200px;" v-model="keyword" placeholder="请输入分类名"></el-input>
            <el-button class="filter-item" type="primary" icon="el-icon-search" v-permission="'/blogSort/getList'"
                style="margin-left: 10px;" @click=handleFind>查找</el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-edit" v-permission="'/blogSort/add'"
                @click="handleAdd">添加分类</el-button>
            <el-button class="filter-item" type="danger" icon="el-icon-delete"
                v-permission="'/blogSort/deleteBatch'">删除选中</el-button>
            <el-button class="filter-item" type="info" icon="el-icon-document"
                v-permission="'/blogSort/blogSortByClickCount'" @click="handleBlogSortByClickCount">点击量排序</el-button>

            <el-button class="filter-item" type="info" icon="el-icon-document" v-permission="'/blogSort/blogSortByCite'"
                @click="handleBlogSortByCite">引用量排序</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'createTime', order: 'ascending' }">
            <el-table-column type="selection"></el-table-column>

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column label="分类名" width="100" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.sortName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="分类介绍" width="250" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.content }}</span>
                </template>
            </el-table-column>

            <el-table-column label="点击数" width="100" align="center" prop="clickCount" sortable="custom"
                :sort-by="['clickCount']">
                <template slot-scope="scope">
                    <span>{{ scope.row.clickCount }}</span>
                </template>
            </el-table-column>

            <el-table-column label="排序" width="100" align="center" prop="sort" sortable="custom" :sort-by="['sort']">
                <template slot-scope="scope">
                    <el-tag type="warning">{{ scope.row.sort }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center" prop="createTime" sortable="custom"
                :sort-orders="['ascending', 'descending']">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="100" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <span>正常</span>
                    </template>
                    <template v-if="scope.row.status == 2">
                        <span>推荐</span>
                    </template>
                    <template v-if="scope.row.status == 0">
                        <span>已删除</span>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="230">
                <template slot-scope="scope">
                    <el-button type="warning" size="small" @click="handleStick(scope.row)"
                        v-permission="'/blogSort/stick'">置顶</el-button>
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)"
                        v-permission="'/blogSort/edit'">编辑</el-button>
                    <el-button type="danger" size="small" v-permission="'/blogSort/delete'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
                layout="total, prev, pager, next, jumper" :total="total" align="right"></el-pagination>
        </div>

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="分类名" :label-width="formLabelWidth" prop="sortName">
                    <el-input v-model="form.sortName" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="分类介绍" :label-width="formLabelWidth" prop="content">
                    <el-input v-model="form.content" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                    <el-input v-model="form.sort" auto-complete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getBlogSortList, stickBlogSort, blogSortByCite, blogSortByClickCount } from '@/api/blogSort'
export default {
    name: '',
    created() {
        this.blogSortList();
    },
    data() {
        return {
            multipleSelection: [], //多选，用于批量删除
            tableData: [],
            keyword: "",
            currentPage: 1,
            pageSize: 10,
            total: 0, //总数量
            title: "增加分类",
            dialogFormVisible: false, //控制弹出框
            formLabelWidth: "120px",
            isEditForm: false,
            orderByDescColumn: "",
            orderByAscColumn: "",
            form: {
                uid: null,
                content: "",
                sortName: ""
            },
            rules: {
                sortName: [
                    { required: true, message: '分类名称不能为空', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在1到10个字符' },
                ],
                sort: [
                    { required: true, message: '排序字段不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '排序字段只能为自然数' },
                ]
            }
        };
    },
    methods: {
        blogSortList() {
            let params = {}
            params.currentPage = this.currentPage
            params.pageSize = this.pageSize
            params.keyword = this.keyword
            params.orderByDescColumn = this.orderByDescColumn
            params.orderByAscColumn = this.orderByAscColumn
            getBlogSortList(params).then(res => {
                this.tableData = res.data.records
                this.pageSize = res.data.size
                this.currentPage = res.data.current
                this.total = res.data.total
            })
        },
        handleFind() {
            this.currentPage = 1
            this.blogSortList()
        },
        handleStick(row) {
            this.$confirm("此操作将会把该标签放到首位, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                let params = {}
                params.uid = row.uid
                stickBlogSort(params).then(res => {
                    this.blogSortList()
                })
            }).catch(() => {
                // this.$commonUtil.message.info("已取消置顶")
            });
        },
        handleBlogSortByCite() {
            this.$confirm(
                "此操作将根据博客引用量对所有的标签进行降序排序, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(() => {
                blogSortByCite().then(res => {
                    this.blogSortList()
                })
            }).catch(error => { })
        },
        handleBlogSortByClickCount() {
            this.$confirm(
                "此操作将根据点击量对所有的标签进行降序排序, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(() => {
                blogSortByClickCount().then(res => {
                    this.blogSortList()
                })
            }).catch(error => { })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.blogSortList()
        },
        handleEdit(row) {
            this.title = '编辑分类'
            this.isEditForm = true
            this.dialogFormVisible = true
            this.form = row
        },
        handleAdd() {
            this.title = '添加分类'
            this.dialogFormVisible = true
            this.isEditForm = false
            this.form = this.getFormObject()
        },
        getFormObject: function () {
            var formObject = {
                uid: null,
                content: null,
                sortName: null,
                sort: 0
            };
            return formObject;
        },
    }
}
</script>

<style scoped></style>